<script setup lang="ts">
import { ref, computed, h } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Layout, Menu, Dropdown, Avatar, message } from "ant-design-vue";
import {
  UserOutlined,
  LogoutOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import loginApi from "@/api/login.js";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

const { Header, Content, Footer } = Layout;
const router = useRouter();
const route = useRoute();

// 登录状态
const isLoggedIn = computed(() => {
  return localStorage.getItem("isLoggedIn") === "true";
});

// 用户信息
const user = computed(() => {
  const userString = localStorage.getItem("userName");
  return userString ? { username: userString } : { username: "" };
});

// 导航到指定路由
const navigateTo = (key: string) => {
  router.push(key);
};

// 处理登出
const handleLogout = async () => {
  try {
    await loginApi.logout({ id: Number(localStorage.getItem("userId")) });
    // 清除登录状态
    localStorage.removeItem("isLoggedIn");

    // 显示消息
    message.success("已成功退出登录");

    // 使用页面刷新方式跳转到登录页，确保完全重新加载
    setTimeout(() => {
      // 先跳转到登录页
      router.push("/login");
      // 然后强制刷新页面，确保完全重新加载
      window.location.reload();
    }, 100);
  } catch (err) {
    localStorage.clear();
    window.location.reload();
  }
};
</script>

<template>
  <a-config-provider :locale="zhCN">
    <template v-if="isLoggedIn">
      <Layout style="min-height: 100vh">
        <Header class="app-header">
          <div class="logo">
            <img src="/police-badge.svg" alt="Police Badge" height="32" />
            <span class="logo-title">全省中小学信息管理系统</span>
          </div>
          <div class="user-menu">
            <Dropdown>
              <a class="user-info" @click.prevent>
                <Avatar class="user-avatar" :size="32">
                  <template #icon><UserOutlined /></template>
                </Avatar>
                <span class="username">{{ user.username }}</span>
                <DownOutlined style="font-size: 12px; margin-left: 6px" />
              </a>
              <template #overlay>
                <Menu>
                  <Menu.Item key="logout" @click="handleLogout">
                    <LogoutOutlined />
                    <span>退出登录</span>
                  </Menu.Item>
                </Menu>
              </template>
            </Dropdown>
          </div>
        </Header>
        <Content class="app-content">
          <router-view />
        </Content>
        <Footer class="app-footer">
          <p>全省中小学信息管理系统 ©2025 公安部门专用系统</p>
        </Footer>
      </Layout>
    </template>
    <template v-else>
      <router-view />
    </template>
  </a-config-provider>
</template>

<style scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  height: 68px;
}

.logo-title {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-left: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.user-menu {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  color: white;
}

.user-avatar {
  background-color: rgba(255, 255, 255, 0.2);
}

.username {
  margin-left: 8px;
  font-size: 16px;
}
</style>
